// import { useState } from "react";
import { useRoutes } from "react-router-dom";
import routes from "./router";
import { useNavigate } from "react-router-dom";

function App() {
  const outlet = useRoutes(routes);
  const navigateTo = useNavigate();
  const spanStyle = {
    margin: "20px",
    backgroundColor: "skyblue",
    cursor: "pointer",
  };
  // 跳转
  const handleChangePage = (e) => {
    // 获取路径
    console.log(e.target.getAttribute("path"));
    const path = e.target.getAttribute("path");
    navigateTo(path);
  };
  return (
    <>
      <span style={spanStyle} onClick={handleChangePage} path={"/"}>
        路由懒加载
      </span>
      <span style={spanStyle} onClick={handleChangePage} path={"/ImgDemo1"}>
        原生js实现
      </span>
      <span style={spanStyle} onClick={handleChangePage} path={"/ImgDemo2"}>
        react插件实现图片懒加载
      </span>
      {/* <span style={spanStyle} onClick={handleChangePage} path={"/ImgDemo3"}>
        图片Demo3
      </span> */}
      <span style={spanStyle} onClick={handleChangePage} path={"/Module"}>
        下拉刷新Demo
      </span>
      <hr></hr>
      <div>{outlet}</div>
    </>
  );
}

export default App;
